<template>
  <main-layout
    :showHome="!isFromList"
    :showBack="isFromList"
    :title="`${isEdit ? '编辑' : '新增'}采购单信息`"
  >
    <div class="edit-box">
      <van-form @submit="onSubmit">
        <!-- 基本信息 -->
        <div class="formTitle">基本信息</div>
        <van-field
          v-model="formObj.createName"
          type="text"
          label="创建人"
          readonly
        />
        <van-field
          v-model="formObj.createTime"
          type="text"
          label="创建时间"
          placeholder="请选择创建时间"
          readonly
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#ff5b02"
              native-type="button"
              @click="timeShow = true"
              >选择时间</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="formObj.projectName"
          type="text"
          label="项目名称"
          placeholder="请选择项目名称"
          readonly
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#ff5b02"
              native-type="button"
              @click="projectShow = true"
              >选择项目</van-button
            >
          </template>
        </van-field>

        <!-- 材料信息 -->
        <div class="formTitle">材料信息</div>
        <van-field
          v-model="formObj.materialName"
          type="text"
          label="材料名称"
          placeholder="请选择材料名称"
          :rules="[{ required: true }]"
          readonly
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#ff5b02"
              native-type="button"
              @click="materialShow = true"
              >选择材料</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="formObj.materialWeight"
          type="number"
          label="采购数量"
          placeholder="请输入采购数量"
          :rules="[{ required: true, message: '请输入采购数量' }]"
        />
        <van-field
          v-model="formObj.materialUnit"
          type="text"
          label="计量单位"
          :rules="[{ required: true, message: '请选择计量单位' }]"
        >
          <template #input>
            <van-dropdown-menu>
              <van-dropdown-item
                v-model="danwei"
                :options="option"
                @click.native="danweiEvt"
                class="danwei"
              >
              </van-dropdown-item>
            </van-dropdown-menu>
          </template>
        </van-field>
        <van-field
          v-model="formObj.price"
          type="number"
          label="采购单价"
          placeholder="请输入采购单价"
          :rules="[{ required: true, message: '请输入采购单价' }]"
        />

        <!-- 供应商信息 -->
        <div class="formTitle">供应商信息</div>
        <van-field
          v-model="formObj.supplierName"
          type="text"
          label="名称"
          placeholder="请选择供应商"
          readonly
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#ff5b02"
              @click="supplierShow = true"
              native-type="button"
              >选择供应商</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="formObj.supplierContact"
          type="text"
          label="联系人"
          readonly
          placeholder="请输入联系人"
          :rules="[{ required: true }]"
        />
        <van-field
          v-model="formObj.supplierPhone"
          type="number"
          label="联系电话"
          readonly
          placeholder="请输入联系电话"
         
        />

        <!-- 审批信息 -->
        <div class="formTitle">审批信息</div>
        <van-field
          v-model="spPerson"
          type="text"
          label="审批人"
          placeholder="请选择审批人"
          readonly
          :rules="[{ required: true }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              color="#ff5b02"
              native-type="button"
              @click="personShow = true"
              >选择审批人</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="formObj.remark"
          type="textarea"
          autosize
          label="备注"
          placeholder="请输入备注"
          :rules="[{ required: true }]"
        />

        <div style="margin: 12px 0px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="#ff5b02"
            >提交</van-button
          >
        </div>
      </van-form>

      <!-- 选择日期组件 -->
      <van-popup
        v-model="timeShow"
        round
        position="bottom"
        :close-on-click-overlay="false"
        :style="{ height: '45%' }"
      >
        <van-datetime-picker
          type="datehour"
          title="选择创建时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onPickTime"
          @cancel="timeShow = false"
          color="#ff5b02"
        />
      </van-popup>

      <!-- 选择项目组件 -->
      <van-popup
        round
        v-model="projectShow"
        position="left"
        :style="{ height: '100%', width: '90%' }"
      >
        <purchase-edit
          btnType="project"
          @dataToEdit="dataToEdit"
        ></purchase-edit>
      </van-popup>

      <!-- 选择材料组件 -->
      <van-popup
        round
        v-model="materialShow"
        position="left"
        :style="{ height: '100%', width: '90%' }"
      >
        <purchase-edit
          btnType="material"
          @dataToEdit="dataToEdit"
        ></purchase-edit>
      </van-popup>

      <!-- 选择材料组件 -->
      <van-popup
        round
        v-model="supplierShow"
        position="left"
        :style="{ height: '100%', width: '90%' }"
      >
        <purchase-edit
          btnType="supplier"
          @dataToEdit="dataToEdit"
        ></purchase-edit>
      </van-popup>

      <!-- 选择负责人组件 -->
      <van-popup
        v-model="personShow"
        round
        position="left"
        :style="{ height: '100%', width: '90%' }"
      >
        <purchase-edit
          btnType="person"
          @dataToEdit="dataToEdit"
        ></purchase-edit>
      </van-popup>
    </div>
  </main-layout>
</template>
<script>
import { dateFormat } from "../../util/index";
import { purchaseListSaveApi, purchaseUpdateApi } from "../../apis/PurchaseApi";
import PurchaseEdit from "../../components/PurchaseEdit.vue";
export default {
  components: { PurchaseEdit },
  data() {
    return {
      // 是否通过编辑按钮过来
      isEdit: false,
      // 选择时间区间
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      // 计量单位
      danwei: "",
      option: [
        { text: "kg", value: 0 },
        { text: "吨", value: 1 },
        { text: "方", value: 2 },
      ],
      loading: false,
      hasMore: true,
      // 是否来自项目管理页面
      isFromList: false,
      // 是否显示选择时间组件
      timeShow: false,
      // 是否显示选择项目组件
      projectShow: false,
      // 是否显示选择材料组件
      materialShow: false,
      // 是否显示选择供应商组件
      supplierShow: false,
      // 是否显示选择负责人组件
      personShow: false,
      // 审批人
      spPerson: "",
      // 表单v-modoule
      formObj: {
        id: "",
        nextId: "",
        createId: "",
        createName: "",
        createTime: "",
        projectId: "",
        projectName: "",
        materialId: "",
        materialName: "",
        materialUnit: "",
        materialWeight: "",
        price: "",
        supplierId: "",
        supplierName: "",
        supplierContact: "",
        supplierPhone: "",
        remark: "",
      },
      // 查询用户信息的查询对象
      personQuery: {
        name: "",
        page: 1,
        size: 20,
      },
      // 用户列表
      personList: [],
      // 地市
      cityName: "",
      // 正则校验电话号码输入是否正确
      pattern: /^1[3-9]{1}[0-9]{9}$/,
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters["common/userInfomation"];
    },
  },
  created() {
    this.isFromList = !!this.$route.query.from;
    this.isEdit = !!this.$route.query.id;
    this.formObj.createName = this.userInfo.name;
    this.editObjList();
  },
  methods: {
    // 如果从编辑页面过来，处理数据
    editObjList() {
      if (!!this.isEdit) {
        this.formObj.id = this.$route.params.row.id;
        this.formObj.createTime = dateFormat(
          this.$route.params.row.createTime,
          "yyyy-MM-dd hh:mm"
        );
        this.formObj.projectName = this.$route.params.row.projectName;
        this.formObj.materialName = this.$route.params.row.materialName;
        this.formObj.materialWeight = this.$route.params.row.materialWeight;
        this.formObj.materialUnit = this.$route.params.row.materialUnit;
        this.formObj.price = this.$route.params.row.price;
        this.formObj.supplierName = this.$route.params.row.supplierName;
        this.formObj.supplierContact = this.$route.params.row.supplierContact;
        this.formObj.supplierPhone = this.$route.params.row.supplierPhone;
        this.formObj.supplierPhone = this.$route.params.row.supplierPhone;
        let index = this.$route.params.row.remark.length - 1;
        this.formObj.remark = this.$route.params.row.remark[index].remark;
      }
    },
    // 提交按钮时间
    async onSubmit() {
      if (!!this.isEdit) {
        let resultUpdate = await purchaseUpdateApi(this.formObj);
        console.log(resultUpdate);
        if (resultUpdate.code === 200) {
          this.$toast.success("更新采购信息成功");
        } else {
          this.$toast.fail("更新采购信息失败");
        }
      } else {
        let result = await purchaseListSaveApi(this.formObj);
        if (result.code === 200) {
          this.$toast.success("新增采购信息成功");
        } else {
          this.$toast.fail("新增采购信息失败");
        }
      }
    },
    // 获取时间
    onPickTime(date) {
      this.timeShow = false;
      this.formObj.createTime = dateFormat(date, "yyyy-MM-dd hh:mm");
    },
    danweiEvt() {
      this.formObj.materialUnit = this.option[this.danwei].text;
    },
    // 选择回调
    // 点击要选择的项，将值赋值
    dataToEdit(user, itemShow) {
      if (this.projectShow) {
        this.formObj.projectName = user.name;
        this.projectShow = itemShow;
      } else if (this.materialShow) {
        this.formObj.materialName = user.name;
        this.materialShow = itemShow;
      } else if (this.supplierShow) {
        this.formObj.supplierName = user.name;
        this.formObj.supplierContact = user.contact;
        this.formObj.supplierPhone = user.phone;
        this.supplierShow = itemShow;
      } else {
        this.spPerson = user.name;
        this.personShow = itemShow;
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>